<%--
  Created by IntelliJ IDEA.
  User: ldh
  Date: 2024/10/22
  Time: 9:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <%--引入vue--%>
    <script src="/js/vue.js"></script>
    <%--axios--%>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <%--elementui--%>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 必须在引入vue文件后 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <%--搜索条件表单--%>
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="编号:">
            <el-input v-model="searchForm.staffId" placeholder="请输入员工编号"></el-input>
        </el-form-item>
        <el-form-item label="姓名:">
            <el-input v-model="searchForm.staffName" placeholder="请输入员工姓名"></el-input>
        </el-form-item>
        <el-form-item label="选择分店:">
            <el-select v-model="searchForm.branchId" placeholder="请选择">
                <el-option v-for="b in branchs" :label="b.branchname" :value="b.branchid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">搜索</el-button>
        </el-form-item>
    </el-form>
    <el-button size="medium" type="success" @click="addStaff">添加<i class="el-icon-circle-plus el-icon--right"></i>
    </el-button>
    <%--
           el-table:表示elementui的表格组件
              :data  绑定了vue的数据
              border: 边框
              style:  100%
       --%>

    <el-table
            :data="staffs"
            border
            style="width: 100%;">
        <%--
           el-table-column: 表格列的标签
               prop: 绑定的数据的属性
               label: 列标题
               width: 列的宽度
        --%>
        <el-table-column
                prop="staffid"
                label="员工编号"
        >
        </el-table-column>
        <el-table-column
                prop="staffname"
                label="员工姓名"
        >
        </el-table-column>
        <el-table-column
                prop="idcard"
                label="身份证号码"
                width="180">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址">
        </el-table-column>
        <el-table-column
                prop="phone"
                label="电话">
        </el-table-column>
        <el-table-column
                prop="entrytime"
                label="入职日期">
        </el-table-column>
        <el-table-column
                prop="branch.branchname"
                label="店名">
        </el-table-column>
        <el-table-column
                prop="role.rolename"
                label="职务名称">
        </el-table-column>
        <el-table-column
                prop="department.deptname"
                label="部门名称">
        </el-table-column>
        <el-table-column
                prop="department.remark"
                label="职务描述">
        </el-table-column>
        <el-table-column
                fixed="right"
                prop="state"
                label="状态">
            <template slot-scope="scope">
                <el-tag
                        v-if="scope.row.state==1"
                        type="success"
                        effect="dark">
                    工作状态
                </el-tag>
                <el-tag
                        v-else
                        type="info"
                        effect="dark">
                    冻结状态
                </el-tag>
            </template>
        </el-table-column>
        <%--fixed:固定右边--%>
        <el-table-column
                fixed="right"
                label="操作"
                width="220"
        >
            <template slot-scope="scope">
                <span v-if="scope.row.branchid==12138 && scope.row.roleid==1">
                      大老板
                </span>
                <span v-else>
                <el-button size="medium" type="success" @click="edit(scope.row.id)">编辑<i
                        class="el-icon-setting el-icon--right"></i></el-button>
                <el-button size="medium" type="danger" icon="el-icon-delete" @click="del(scope.row.id)">删除</el-button>
                </span>
            </template>
        </el-table-column>
    </el-table>
    <%--分页组件el-pagination
          @size-change: 每页数据条数改变时会触发
          @current-change: 页码改变时会触发
          current-page: 当前页码
          page-sizes: 每页的数据个数选择器的选项设置
          page-size: 每页的数据条数
          layout: 分页布局
          total: 数据总数
 --%>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5,10,15,20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <%--添加员工的对话框开始--%>
        <el-dialog title="添加员工" :visible.sync="dialogFormVisible" width="40%">
            <%--
                el-form:表示el的表单元素
                   :model 绑定表单数据对象
                   lable-width: 表单标签的宽度
            --%>
            <el-form :model="form" label-width="120px" :rules="rules" ref="addForm">
                <el-form-item label="头像:" >
                    <%--
                        el-upload: 表单上传组件
                          action: 上传地址
                          show-file-list: 是否显示文件列表
                          on-success: 上传成功回调
                          before-upload: 上传前回调
                    --%>
                    <el-upload
                            class="avatar-uploader"
                            action="/upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
                <el-form-item label="工号:" prop="staffid">
                    <el-input v-model="form.staffid" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名:" prop="staffname">
                    <el-input v-model="form.staffname" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码:" prop="password">
                    <el-input v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="身份证号:" prop="idcard">
                    <el-input v-model="form.idcard" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="员工地址:" prop="address">
                    <el-input v-model="form.address" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="联系方式:" prop="phone">
                    <el-input v-model="form.phone" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="入职日期:">
                    <el-date-picker
                            v-model="form.entrytime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="门店名称:" >
                    <el-select v-model="form.branchid" placeholder="--门店--">
                        <el-option v-for="c in branchs" :label="c.branchname" :value="c.branchid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门名称:" >
                    <el-select v-model="form.deptid" placeholder="--部门--">
                        <el-option v-for="c in depts" :label="c.deptname" :value="c.deptid"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="权限:" >
                    <el-select v-model="form.roleid" placeholder="--权限--">
                        <el-option v-for="c in roles" v-if="c.roleid!=1" :label="c.rolename" :value="c.roleid"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirmAdd">确 定</el-button>
            </div>
        </el-dialog>
    <%--添加员工的对话框结束--%>
</div>
</body>
<script>
    var checkStaffid = (rule, value, callback) => {
        if (!value) {
            return callback(new Error('编号不能为空'));
        }
        setTimeout(() => {
            axios.get("/staff/checkStaffid?staffid=" + value).then(resp => {
                if (resp.data.code === 500) {
                    callback(new Error(resp.data.msg));
                }else{
                    callback();
                }
            })
        },0);
    }
    let app = new Vue({
        el: "#app",
        data: {
            searchForm: {},//搜索条件
            staffs: [],//员工数据
            currentPage: 1,//当前页码
            pageSize: 5,//每页数据条数
            total: 0,//数据总数
            branchs: [],//分店数据
            dialogFormVisible:false,//添加员工对话框是否可见
            form:{},//添加员工表单数据
            imageUrl:"",//头像地址
            depts:[],//部门数据
            roles:[],//角色数据
            rules:{
                staffid:[
                    { validator: checkStaffid, trigger: 'blur' }
                ],
                staffname:[
                    {required: true, message: '请输入姓名', trigger: 'blur'},
                    {min: 1, max: 6, message: '长度在 1 到 6 个字符', trigger: 'blur'}
                ],
                password:[
                    {required: true, message: '请输入密码', trigger: 'blur'}
                ],
                idcard:[
                    {required: true, message: '请输入身份证号', trigger: 'blur'},
                    {min: 18, max: 18, message: '长度为18位', trigger: 'blur'}
                ],
                address:[
                    {required: true, message: '请输入地址', trigger: 'blur'}
                ],
                phone:[
                    {required: true, message: '请输入联系方式', trigger: 'blur'},
                    {min: 11, max: 11, message: '长度为11位', trigger: 'blur'}
                ],
                entrytime:[
                    {required: true, message: '请选择入职日期', trigger: 'blur'}
                ],
                branchid:[
                    {required: true, message: '请选择门店', trigger: 'blur'}
                ],
                deptid:[
                    {required: true, message: '请选择部门', trigger: 'blur'}
                ],
            }
        },
        created() {
            this.loadStaff();
            this.loadBranch();
            this.loadDept();
            this.loadRole();
        },
        methods: {
            //确认添加员工
            confirmAdd(){
                //addForm ref属性有关
                this.$refs.addForm.validate((valid) => {
                    if (valid) {
                        axios.post("/staff/add",this.form).then(resp=>{
                            if(resp.data.code===200){
                                this.$message({
                                    message: resp.data.msg,
                                    type: 'success'
                                });
                                this.dialogFormVisible=false;
                                this.loadStaff();
                            }else{
                                this.$message.error()
                            }
                        })
                    }
                })

            },
            //上传成功触发的回调函数 res: 服务器返回的数据，file:上传的文件对象
            handleAvatarSuccess(res, file) {
                this.imageUrl=res.data; //将返回的路径设置到imageUrl中
                this.form.url=this.imageUrl; //将上传路径设置到表单中
                // this.editForm.headimg=this.imageUrl;
            },
            //上传文件之前的函数
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg' || file.type==='image/png';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG或png 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            // 加载部门数据
            loadDept(){
                axios.get("/dept/list").then(resp => {
                    this.depts = resp.data.data;
                })
            },
            // 加载角色数据
            loadRole(){
                axios.get("/role/list").then(resp => {
                    this.roles = resp.data.data;
                })
            },

            // 加载分店数据
            loadBranch() {
                axios.get("/branch/list").then(resp => {
                    this.branchs = resp.data.data;
                })
            },
            // 加载员工数据
            loadStaff() {
                axios.post("/staff/list?current=" + this.currentPage + "&pageSize=" + this.pageSize, this.searchForm).then(resp => {
                    this.staffs = resp.data.data.list;
                    this.total = resp.data.data.total;
                })
            },
            // 每页数据条数改变
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadStaff();
            },
            // 页码改变
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadStaff();
            },
            // 搜索
            onSubmit() {
                this.loadStaff();
            },
            // 添加员工
            addStaff() {
                this.dialogFormVisible=true;
            }
        }
    })
</script>
</html>
